<template>
  <div class="custom-date" v-show="data.is_show">
    <div class="custom-date-inner">
      <div class="title">
        <h3>自定义日期</h3>
        <i class="ic_close" @click="close"></i>
      </div>
      <div class="switch">
        <el-radio v-model="data.type" label="1">每周</el-radio>
        <el-radio v-model="data.type" label="2">每月</el-radio>
      </div>
      <div class="month">
        <div v-if="data.type==1" class="top week-top">
          <el-checkbox-group
            v-model="checkedWeeks">
            <el-checkbox v-for="week in weeks" :label="week" :key="week">
              <span v-if="week==1">周一</span>
              <span v-if="week==2">周二</span>
              <span v-if="week==3">周三</span>
              <span v-if="week==4">周四</span>
              <span v-if="week==5">周五</span>
              <span v-if="week==6">周六</span>
              <span v-if="week==7">周日</span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div v-if="data.type==2" class="top week-month">
          <div class="month-list">
            <div v-for="(item,index) in month" @click="chooseDay(item)" :key="index" :class="item.active?'active':''">
              <span :class="item.day=='32'?'active_last':''"> {{item.day=='32'?'最后一天':item.day}}</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-left">
            <el-checkbox v-model="holiday">跳过法定节假日</el-checkbox>
            <el-checkbox v-show="data.type==2" v-model="ignoreWeekend">跳过双休</el-checkbox>
          </div>
          <div class="bottom-right">
            <label for="">汇报时间</label>
            <el-time-picker
              format="HH:mm"
              v-model="reportTime"
              :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
              placeholder="选择汇报时间">
            </el-time-picker>
          </div>
        </div>
        <div class="btn">
          <span @click="callback">确定</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CustomDate",
    props: {
      data: {
        type: Object,
        default: {
          is_show: false,//是否显示
          type: '1',//1每周，2每月
          double_cease_month: false,//跳过双休
          holiday: false,//跳过假日
          time: new Date(2016, 9, 10, 18, 40),//汇报时间
          day: [],//汇报的天数['17','20']
          is_last_day: true,//是否最后一天
          checkedWeeks:[],//选择的每周
        }
      },
    },
    data() {
      return {
        checkedWeeks:[],
        weeks:['1', '2', '3', '4','5', '6', '7'],
        month:[],
        holiday:false,//是否跳过节假日
        ignoreWeekend:false,//是否跳过周末
        reportTime:'6:30',//汇报时间
      }
    },
    created() {
      this.holiday=this.data.holiday||false;
      this.ignoreWeekend=this.data.double_cease_month||false;
      this.checkedWeeks=this.data.checkedWeeks||[];
      this.reportTime=this.data.time||'2019-01-01'+'6:30';
      //月的天数循环
      for (let i=0;i<32;i++){
        this.month.push({
          day:i+1,
          active:false
        })
      }
    },
    methods:{
      //关闭
      close:function(){
          this.data.is_show=false
      },
      //保存
      callback:function () {
        if(this.data.type==1){
          this.data.day=[];
          //每周
          let params={
            type:'1',
            name:'每周',
            days:this.checkedWeeks,
            ignoreHoliday:this.holiday,
            reportTime:this.reportTime
          };
          this.$emit("callback",params);
        }else if(this.data.type==2){
          this.data.checkedWeeks=[];
          this.data.day=[];
          let _this=this;
          //选中的天数
          this.month.map(function (item,index) {
            if(item.active){
              _this.data.day.push(item.day);
            }
          });
          //每月
          let params={
            type:'2',
            name:'每月',
            days:this.data.day,
            ignoreHoliday:this.holiday,
            ignoreWeekend:this.ignoreWeekend,//是否跳过周末
            reportTime:this.reportTime
          };
          this.$emit("callback",params);
        }

      },
      chooseDay:function (item) {
       item.active=!item.active;
      }
    },
  }
</script>

<style scoped type="text/scss" lang="scss">
  .custom-date {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);

    .set-milepost-inner, .custom-date-inner {
      width: 608px;
      height: 384px;
      border-radius: 6px;
      background-color: #ffffff;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;

      .title {
        line-height: 80px;
        height: 80px;
        padding: 0 32px;
        font-size: 16px;
        color: #454A55;
        position: relative;

        .ic_close {
          position: absolute;
          background-image: url("../../assets/img/close_icon.png");
          width: 16px;
          height: 16px;
          background-size: cover;
          background-repeat: no-repeat;
          right: 32px;
          top: 32px;
          cursor: pointer;
        }
      }

      .switch {
        padding-left: 32px;
      }

      .form {
        padding-right: 64px;

        .save-btn {
          display: inline-block;
          border-radius: 6px;
          width: 88px;
          line-height: 32px;
          text-align: center;
          cursor: pointer;
          background-color: #0755db;
          color: #FFFFFF;
        }

        .add-manager {
          position: absolute;
          width: 38px;
          height: 38px;
          background-image: url("../../assets/img/project/add_manager_icon1.png");
          background-size: 38px 38px;
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
        }

        .select-manager {
          padding-left: 50px;
        }
      }

      .month {
        padding: 0 32px;

        .top {
          margin-top: 15px;
          height: 114px;
          .month-list{
            display: flex;
            flex-wrap: wrap;
            > div {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              color: #96A2AA;
              font-size: 14px;
              line-height: 32px;
              text-align: center;
              margin: 0 8px;
              margin-bottom: 6px;
              cursor: pointer;
            }

            > div:last-child {
              width: 80px;
            }

            > div.active {
              span{
                display: block;
                background-color: #0755DB;
                color: #ffffff;
                border-radius: 50%;
              }
              .active_last {
                background-color: #0755DB;
                color: #ffffff;
                border-radius: 6px!important;
              }
            }
          }
        }
        .week-top{
          padding-top: 16px;
        }

        .bottom {
          margin-top: 40px;
          height: 40px;
          line-height: 40px;

          .bottom-left {
            float: left;
          }

          .bottom-right {
            float: right;

            label {
              font-size: 14px;
              color: #454A55;
              padding-right: 24px;
            }
          }
        }

        .btn {
          margin-top: 30px;
          text-align: right;

          span {
            display: inline-block;
            width: 88px;
            height: 32px;
            line-height: 32px;
            border-radius: 6px;
            background-color: #0755DB;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
          }
        }
      }
      .week{
        .top{
          padding: 24px 32px;
        }
        .bottom {
          padding: 0 32px;
          margin-top: 40px;
          height: 40px;
          line-height: 40px;

          .bottom-left {
            float: left;
          }

          .bottom-right {
            float: right;

            label {
              font-size: 14px;
              color: #454A55;
              padding-right: 24px;
            }
          }
        }

        .btn {
          margin-top: 30px;
          text-align: right;

          span {
            display: inline-block;
            width: 88px;
            height: 32px;
            line-height: 32px;
            border-radius: 6px;
            background-color: #0755DB;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
<style>
  .bottom-right .el-input__inner, .bottom-right .el-date-editor--time {
    width: 160px;
  }
</style>
